<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车2</title>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th><input type="checkBox" v-model="allChange" @change="changeAll" /></th>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>
                        <input type="checkbox" v-model="item.isChange" @change="backChange">
                    </td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <input type="button" value="-">
                        {{item.number}}
                        <input type="button" value="+">
                    </td>
                    <td>￥{{item.price * item.number}}</td>
                    <td><input type="button" value="删除"></td>
                </tr>
            </tbody>
        </table>
        <span>商品数量：{{totalNum}}，合计：￥{{totalPrice}}</span>
    </div>
</body>
</html>
<script src="./js/vue.global.js"></script>
<script>
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                // 页面刚打开，选中状态默认为false
                allChange: true,
                // 定义基础数据
                list: [
                    {
                        isChange: false,
                        id: "01001",
                        name: "铅笔",
                        price: 1.5,
                        number: 2
                    },
                    {
                        isChange: false,
                        id: "01002",
                        name: "刚笔",
                        price: 44,
                        number: 1
                    },
                    {
                        isChange: false,
                        id: "01003",
                        name: "毛笔",
                        price: 15,
                        number: 3
                    }
                ]
            }
        },
        computed: {
            // 商品数量
            totalNum() {
                let count = 0
                this.list.forEach(item => item.isChange && (count += item.count))
                return count
            },
            // 商品总价
            totalPrice() {

            }
        },
        methods: {
            // 实现全选
            changeAll() {
                console.log("allChange", this.allChange);
                this.list.forEach(item => {
                    item.isChange = this.allChange;
                    console.log(item.isChange);
                });
            },
            backChange() {
                console.log("backChange");
                this.allChange = this.list.every(item => item.isChange);
                console.log(this.allChange);
            },
        }
    })
    app.mount("#app")
</script>